"use client";

import { CopilotPlugin } from "@platejs/ai/react";
import { useElement, usePluginOption } from "platejs/react";

export function GhostText() {
  const element = useElement();

  const isSuggested = usePluginOption(
    CopilotPlugin,
    "isSuggested",
    element.id as string,
  );

  if (!isSuggested) return null;

  return &lt;GhostTextContent /&gt;;
}

function GhostTextContent() {
  const suggestionText = usePluginOption(CopilotPlugin, "suggestionText");

  return (
    <span>
      {suggestionText && suggestionText}
    </span>
  );
}
